import React, { useState } from 'react';
import { Props } from './interface';
import './style/index';

const defaultProps = {
  width: 'auto',
  height: 'auto',
};

const Video: React.FC<Props> = userProps => {
  const props = { ...defaultProps, ...userProps };
  const [src, setSrc] = useState('https://media.w3.org/2010/05/sintel/trailer_hd.mp4');
  const [poster, setPoster] = useState('https://video-react.js.org/assets/poster.png');
  return (
    <div className="videoBox" style={{ width: defaultProps.width, height: defaultProps.height }}>
      <video poster={poster} src={src}></video>
      <div className="video-control-bar">
        <div className="play-btn"></div>
        <div className="vol-btn"></div>
        <div className="time-btn"></div>
        <div className="progress-control"></div>
        <div className="fullscreen"></div>
        <div></div>
        <div></div>
      </div>
    </div>
  );
};

export default Video;
